﻿@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="Pager#GotoPage" />Go to Page</h2>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.NavigationMode">NavigationMode</a> property to specify how users navigate between the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager">Pager</a>'s pages. The following navigation modes are available:
    </p>
    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.NavigationMode">Auto</a> - If the number of pages is greater or equal to the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.SwitchToInputBoxButtonCount">SwitchToInputBoxButtonCount</a> value, the component displays the Go to Page input box. Otherwise, numeric buttons are displayed.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.NavigationMode">InputBox</a> - Users can type a page number in the displayed Go to Page input box to jump to the corresponding page.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.NavigationMode">NumericButtons</a> - Users can click numeric buttons to navigate between pages.</li>
    </ul>
    <p>
        In the following example, the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxPager.NavigationMode">NavigationMode</a> property is set to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.PagerNavigationMode">PagerNavigationMode.InputBox</a>.
    </p>
</div>
<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Use the input box or navigation buttons"/>
    </div>
    <div class="card-body overflow-auto">
        <DxPager PageCount="1000"
                 ActivePageIndex="5"
                 NavigationMode=@PagerNavigationMode.InputBox
                 SizeMode="SizeMode">
        </DxPager>
    </div>
</div>

<CodeSnippet_Pager_GotoPage/>
